{{extend '../layout/main.html'}}

{{block name="css"}}
<link rel="stylesheet" href="/css/wangeditor.css">
<link rel="stylesheet" type="text/css" href="/js/webuploader/webuploader.css">
<style>
  .card-header {
    position: relative;
  }

  .card-header .add {
    position: absolute;
    right: 10px;
    top: 5px;
  }
</style>
{{/block}}

{{block name="js"}}
<script src="/js/wangeditor.js"></script>
<script type="text/javascript" src="/js/webuploader/webuploader.js"></script>
<script>
  // 全局变量
  var E = window.wangEditor;
  window.editor = E.createEditor({
    selector: '#editor-text-area',
    html: 'fewfewffewfewfewfefewfeewfew',
    config: {
      placeholder: '请输入内容',
      MENU_CONF: {
        fontSize: {
          fontSizeList: ['12px', '16px', '24px', '40px']
        },
        emotion: {
          emotions: '😀 😃 😄 😁 😆 😅 😂 🤣 😊 😇 🙂 🙃 😉'.split(' ')
        },
        uploadImage: {
          fieldName: 'your-fileName',
          base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
        }
      },
      // 内容有修改时它会触发
      onChange(editor) {
        document.querySelector('#body').value = editor.getHtml()
      }
    }
  })
  window.toolbar = E.createToolbar({
    editor,
    selector: '#editor-toolbar',
    config: {}
  })
  // 富文本回显，它是的处理需要等到加载完成后才能赋值
  window.onload = function () {
    editor.dangerouslyInsertHtml(`{{@newsData.body}}`)
  }


  document.querySelector('#file').addEventListener('change', function () {
    let file = this.files[0]
    let { name, size } = file
    // 拆分的一块大小为50kb
    const chunkSize = 50 * 1024
    // 拆分的起始位置
    let start = 0
    let index = 0
    // 数据，存放所有的请求
    let arr = []

    while (start < size) {
      console.log(index, start)
      let blob = null
      let end = start + chunkSize
      if (end > size) {
        blob = file.slice(start, size)
      } else {
        blob = file.slice(start, end)
      }
      start += chunkSize

      let formData = new FormData()
      formData.append('index', index)
      formData.append('file', new File([blob], name))
      index++
      // 请求存放到数组中
      arr.push(fetch('/upfile', {
        method: 'post',
        body: formData
      }).then(res => res.json()))
    }

    Promise.all(arr).then(() => {
      let count = arr.length
      // get
      fetch(`/merge?count=${count}&name=${name}`).then(res => res.json()).then(data => console.log(data))
    })




  })



</script>
{{/block}}

{{block name="content"}}
<!--页面主要内容-->
<main class="lyear-layout-content">

  <div class="container-fluid">

    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header">
            <h3>修改新闻资讯内容</h3>
            <a href="/news/index" class="btn btn-primary add">返回列表</a>
          </div>
          <div class="card-body">
            <form class="form-horizontal" action="/news/{{id}}/edit" method="post">
              <div class="form-group">
                <label class="col-xs-12" for="title">新闻标题：</label>
                <div class="col-xs-12">
                  <input class="form-control" type="text" name="title" id="title" value="{{newsData.title}}">
                  <div class="help-block">新闻标题内容不能为空，要有实际的名称</div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12" for="author">发布作者：</label>
                <div class="col-xs-12">
                  <input class="form-control" type="text" name="author" id="author" value="{{newsData.author}}">
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12" for="desn">资讯描述：</label>
                <div class="col-xs-12">
                  <textarea class="form-control" id="desn" name="desn" rows="6"
                    placeholder="内容..">{{newsData.desn}}</textarea>
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12" for="click">访问量：</label>
                <div class="col-xs-12">
                  <input class="form-control" type="number" value="{{newsData.click}}" name="click" id="click">
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12">资讯标签：</label>
                <div class="col-xs-12">
                  <label class="checkbox-inline">
                    <input type="checkbox" name="tag" value="劲爆" {{if newsData.tag.includes('劲爆')}} checked {{/if}}>
                    劲爆
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="tag" value="娱乐" {{if newsData.tag.includes('娱乐')}} checked {{/if}}>
                    娱乐
                  </label>
                  <label class="checkbox-inline">
                    <input type="checkbox" name="tag" value="学习" {{if newsData.tag.includes('学习')}} checked {{/if}}>
                    学习
                  </label>
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12">封面：</label>
                <div class="col-xs-12">
                  <img src="{{newsData.pic}}" id="showpic" style="width: 50px;">
                  <input type="hidden" value="{{newsData.pic}}" name="pic" id="pic">
                  <input type="file" id="file">
                </div>
              </div>
              <div class="form-group">
                <label class="col-xs-12" for="desn">正文：</label>
                <div class="col-xs-12">
                  <!-- 编辑器 DOM -->
                  <div style="border: 1px solid #ccc;">
                    <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
                    <div id="editor-text-area" style="height: 500px"></div>
                  </div>
                  <input type="hidden" name="body" id="body">
                </div>
              </div>
              <hr>
              <div class="form-group">
                <div class="col-xs-12">
                  <button class="btn btn-primary" type="submit">修改新闻资讯内容</button>
                </div>
              </div>
            </form>

          </div>
        </div>
      </div>

    </div>

</main>
<!--End 页面主要内容-->
{{/block}}